<template>
  <div class="flex h-full flex-col bg-white px-4.5 pt-4.5">
    <div v-if="title" class="relative pb-4.5" :class="[titleClass]">
      <span class="text-2xl font-semibold text-color-header">{{ title }}</span>
      <slot name="titleSuffix" />
    </div>
    <slot name="mid" />
    <div
      class="flex flex-1 overflow-hidden"
      :class="[contentClass, tablePgPx0 ? 'sl-table-pg-px0' : '', contentRow ? 'flex-row items-stretch' : 'flex-col']"
    >
      <slot />
    </div>
  </div>
</template>
<script setup lang="ts">
withDefaults(
  defineProps<{
    title?: string;
    contentClass?: string;
    titleClass?: string;
    //slot中的sltable的分页水平padding是否设为0
    tablePgPx0?: boolean;
    contentRow?: boolean;
  }>(),
  {
    tablePgPx0: true,
  }
);
</script>
